<template>

  <smart-page >
    <template #actions>
      <a-button   v-auth="Acl.SYSTEM_DICT_DOWNLOAD" @click="downLoad()">下载字典</a-button>
      <a-button  v-auth="Acl.SYSTEM_DICT_DELETE"  :disabled="selectedKeys.length === 0" @click="onDelete()">批量删除</a-button>
      <a-button   v-auth="Acl.SYSTEM_DICT_ADD" type="primary" @click="editCtr.open()">新建字典</a-button>
    </template>
    <template #search>
      <smart-search :query-array="DICT_SEARCH" @on-handler="onSearch"/>
    </template>
    <a-table v-model:selectedKeys="selectedKeys"
             :table-layout-fixed="theme.layoutFixed"
             :row-selection="rowSelection"
             :columns="DICT_COLUMNS"
             :row-key="rowKey"
             :column-resizable="theme.resizable"
             :bordered="theme.bordered"
             :stripe="theme.stripe"
             :sticky-header="theme.sticky"
             :hoverable="theme.hoverAble"
             :pagination="pagination"
             :loading="theme.loading"
             :data="dataSource"
             @page-change="onPageChange"
             @page-size-change="onPageSizeChange"
    >

      <template #action="{ record }">
        <a-space>
          <a-link @click="readCtr.open(record)"> 详情</a-link>
          <a-link  v-auth="Acl.SYSTEM_DICT_UPDATE"  v-if="['EDIT','FULL'].includes(record.rwState?.value)" @click="editCtr.open(record)"> 编辑</a-link>
          <a-link   v-auth="Acl.SYSTEM_DICT_DELETE" v-if=" 'FULL'===record.rwState?.value" status="danger" @click="onDelete(record)"> 删除</a-link>
        </a-space>
      </template>
    </a-table>


    <edit-modal v-if="editCtr.show" :record="editCtr.record" @cancel="editCtr.close"/>
    <read-drawer v-if="readCtr.show" :record="readCtr.record" @cancel="readCtr.close"/>
  </smart-page>


</template>
<script lang="ts" setup name="system-settings-dict">
import {onMounted} from 'vue';
import {saveAs} from 'file-saver'
import {DICT_SEARCH} from '../resource/search'
import {DICT_COLUMNS} from "../resource/colums";
import {TablePage} from "@/libs/core";
import {SystemHttp} from "../resource/http";
import EditModal from './edit.vue'
import ReadDrawer from './read.vue'
import {MsgUtil} from "@/utils";
import {Acl} from "@/libs/acl";

const pageConfig = {title: '数据字典', rowKey: 'id', nameKey: 'title'}
const tablePage = new TablePage(pageConfig).setFetchXhr(SystemHttp.getDictPage)
    .setPermission(Acl.SYSTEM_DICT_PAGE_LIST)
    .setDeleteXhr(SystemHttp.delDict);

const {theme, pagination, rowKey, dataSource, rowSelection, selectedKeys, editCtr, readCtr} = tablePage
const {onFetch, onPageChange, onPageSizeChange, onDelete, onSearch} = tablePage
const downLoad = () => {
  const handler = async () => {
    const { message, data} = await SystemHttp.downLoadDict()
    if (data.length) {
      const blob = new Blob([data], {type: 'application/javascript'})
      saveAs(blob, 'DictOptions.ts')
    } else {
      MsgUtil.notify('操作失败', message, 'error')
    }
  }
  MsgUtil.confirm('确定要下载当前系统内的数据字典吗?', handler,'下载提示','确定下载')

}

onMounted(() => onFetch())
</script>

